<template>
	<view>
		<view class="header">
			<view class="status_bar" :style="{height:height+'px'}"></view>
			<view class="white">
				<view class="center ptb-15 size-34 bold">个人中心</view>
				<view class="pl-30 flex">
					<view class="flex_l" @click="toUser">
						<image :src="userInfo.avatar?userInfo.avatar:'../../static/user.png'"
							style="width: 128rpx;height: 128rpx;border-radius: 50%;" mode=""></image>
						<view class="ml-30" v-if="token">
							<view class="size-32 bold mb-25 flex1 flex-middle">
								{{userInfo.nickname}}
								<image src="../../static/editing-icon.png" class="ml-10"
									style="width: 32rpx;height: 32rpx;" mode=""></image>
							</view>
							<view class="size-26">{{userInfo.mobile}}</view>
						</view>
						<navigator class="ml-30 size-36" v-else url="/pages/login/index">登录/注册</navigator>
					</view>
					<!-- <view @click="toSign" class="center" style="width: 178rpx;height: 65rpx;background: rgba(255, 255, 255, 0.22);border-radius: 30px 0px 0px 30px;">
						<image src="../../static/my-sign.png" style="width: 38rpx;height: 38rpx;" mode=""></image>
						<view class="ml-15">签到</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="flex mlr-30 plr-20 ptb-30 bg-white radius-10"
			style="margin-top: -100rpx;box-shadow: 0px 2px 12px 0px rgba(157, 157, 157, 0.38);">
			<!-- <view class="flex flex-column" @click="toWallet">
				<view class="size-36  yellow">{{userInfo.money}}</view>
				<view class="mt-10">钱包</view>
			</view> -->
			<view class="flex flex-column">
				<view class="size-36 yellow">￥{{userInfo.income ? userInfo.income : '0.00'}}</view>
				<view class="mt-10">累计收入</view>
			</view>
			<view class="flex flex-column" @click="toScore">
				<view class="size-36 yellow">{{userInfo.score ? userInfo.score : '0.00'}}</view>
				<view class="mt-10">可用积分</view>
			</view>
			<view class="flex flex-column"></view>
			<view class="flex flex-column"></view>
			<view class="flex flex-column"></view>

			<!-- <view class="flex flex-column" @click="toCollect">
				<view class="size-36  yellow">{{userInfo.collect_count||0}}</view>
				<view class="mt-10">收藏</view>
			</view>
			<view class="flex flex-column" @click="toHistory">
				<view class="size-36  yellow">{{userInfo.history_count||0}}</view>
				<view class="mt-10">历史</view>
			</view> -->
		</view>

		<!-- 其他服务 -->
		<view class="pb-10" style="border-radius: 10rpx 10rpx 0 0;">
			<view class="plr-36 pt-36 size-34 bold">其他服务</view>
			<u-grid :col="4" :border="false" class="mtb-10">
				<!-- <u-grid-item @click="toFriend" v-if="0">
					<image src="../../static/my-1.png" style="width: 70rpx;height: 70rpx;" mode="aspectFill"></image>
					<view class="mt-15 size-24">我的邀请</view>
				</u-grid-item> -->
				<u-grid-item @click="goPhone" v-if="platform_phone">
					<image src="../../static/cooperation.png" style="width: 70rpx;height: 70rpx;" mode="aspectFill">
					</image>
					<view class="mt-15 size-24">合伙人招募</view>
				</u-grid-item>
				<!-- <u-grid-item @click="toEnter">
					<image src="../../static/cooperation.png" style="width: 70rpx;height: 70rpx;" mode="aspectFill"></image>
					<view class="mt-15 size-24">商家入驻</view>
				</u-grid-item> -->
				<u-grid-item @click="toCode">
					<image src="../../static/qrcode.png" style="width: 70rpx;height: 70rpx;" mode="aspectFill"></image>
					<view class="mt-15 size-24">推广码</view>
				</u-grid-item>
				<!-- <u-grid-item @click="toService">
					<image src="../../static/my-6.png" style="width: 70rpx;height: 70rpx;" mode="aspectFill"></image>
					<view class="mt-15 size-24">在线客服</view>
				</u-grid-item> -->
				<u-grid-item @click="toRecyclerApplication" v-if="userInfo.group_id === 1">
					<image src="../../static/recycler.png" style="width: 70rpx;height: 70rpx;" mode="aspectFill">
					</image>
					<view class="mt-15 size-24">回收员招募</view>
				</u-grid-item>
				<u-grid-item @click="toRecycler" v-if="userInfo.group_id === 2">
					<image src="../../static/recycling-application.png" style="width: 70rpx;height: 70rpx;"
						mode="aspectFill"></image>
					<view class="mt-15 size-24">回收员订单</view>
				</u-grid-item>
				<u-grid-item @click="toNearbyRecycler">
					<image src="../../static/nearby-recycler.png" style="width: 70rpx;height: 70rpx;" mode="aspectFill">
					</image>
					<view class="mt-15 size-24">附近回收员</view>
				</u-grid-item>
				<u-grid-item @click="toAddress">
					<image src="../../static/address.png" style="width: 70rpx;height: 70rpx;" mode="aspectFill"></image>
					<view class="mt-15 size-24">我的地址</view>
				</u-grid-item>
				<!-- #ifdef MP-WEIXIN -->
				<u-grid-item>
					<button open-type="contact" type="default" class="clear-btn">
						<image src="../../static/consultation.png" style="width: 70rpx;height: 70rpx;"
							mode="aspectFill"></image>
						<view class="mt-15 size-24" style="margin-top: 2px;color: #333!important;">服务咨询</view>
					</button>
				</u-grid-item>
				<!-- #endif -->
				<u-grid-item @click="toSet">
					<image src="../../static/setting.png" style="width: 70rpx;height: 70rpx;" mode="aspectFill"></image>
					<view class="mt-15 size-24">设置</view>
				</u-grid-item>
			</u-grid>
		</view>

		<youLike v-if="flag"></youLike>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex'
    import Auth from '@/libs/permission'
	export default {
		data() {
			return {
				platform_phone: '',
				flag: false
			}
		},
		computed: {
			...mapState(['userInfo', 'token', 'height'])
		},
		onLoad() {
			this.platform_phone = uni.getStorageSync('platform_phone');
		},
		onPullDownRefresh() {
			if (this.token) {
				this.$store.dispatch('updateUserInfo')
				uni.stopPullDownRefresh();
			} else {
				uni.stopPullDownRefresh();
			}
		},
		onShow() {
			this.flag = true;
		},
		onHide() {
			this.flag = false
		},
		methods: {
			goPhone() {
				uni.makePhoneCall({
					phoneNumber: this.platform_phone
				});
			},
			toUser() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/my/user'
					})
				}
			},
			toSign() {
				uni.navigateTo({
					url: '/pages/my/sign'
				})
			},
			toWallet() {
				uni.navigateTo({
					url: '/pages/my/wallet'
				})
			},
			toCollect() {
				uni.navigateTo({
					url: '/pages/my/collect'
				})
			},
            async toNearbyRecycler() {
                let that = this;
                let authState = await new Auth('userLocation').check();
                authState && that.$map.getRegeo({
					success: (data) => {
                        that.$store.commit('getCity', data[0].regeocodeData.addressComponent.city)
                        that.$store.commit('getSite', data[0].latitude + ',' + data[0].longitude)
						uni.navigateTo({
							url: '/pages/home/recycler-distribution'
						})
					}
				}, function() {
                    uni.showToast({
                        title: "定位获取失败，请检测是否开启定位",
                        icon: 'none'
                    })
				});
			},
			toHistory() {
				uni.navigateTo({
					url: '/pages/my/history'
				})
			},
			toScore() {
				uni.navigateTo({
					url: '/pages/my/balance'
				})
			},
			toCoupon() {
				uni.navigateTo({
					url: '/pages/my/coupon/index'
				})
			},
			toFriend() {
				uni.navigateTo({
					url: '/pages/my/my-friend'
				})
			},
			toEnter() {
				uni.navigateTo({
					url: "/pages/my/process"
				})
			},
			toRecyclerApplication() {
				uni.navigateTo({
					url: "/pages/my/recycler-application"
				})
			},
			toRecycler() {
				// #ifdef MP-WEIXIN
				let _this = this;
				if (_this.userInfo.wechat_tmpl_ids && _this.userInfo.wechat_tmpl_ids.length) {
					uni.requestSubscribeMessage({
						tmplIds: _this.userInfo.wechat_tmpl_ids,
						complete() {
							uni.navigateTo({
								url: "/pages/order/recycler-list"
							});
						}
					})
				} else {
					uni.navigateTo({
						url: "/pages/order/recycler-list"
					});
				}
				// #endif
				// #ifndef MP-WEIXIN
				uni.navigateTo({
					url: "/pages/order/recycler-list"
				});
				// #endif
			},
			toCode() {
				uni.navigateTo({
					url: '/pages/my/share'
				})
			},
			toAddress() {
				uni.navigateTo({
					url: '/pages/my/address/list'
				})
			},
			toService() {
				uni.navigateTo({
					url: '/pages/my/service'
				})
			},
			toFeedback() {
				uni.navigateTo({
					url: ''
				})
			},
			toSet() {
				uni.navigateTo({
					url: '/pages/my/set/index'
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.header {
		height: 410rpx;
		background: url(../../static/header-bg.png) no-repeat;
		background-size: 100% 100%;
	}

	.clear-btn::after {
		border: none;
	}

	.clear-btn {
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		// font-size: 18px;
		text-align: center;
		text-decoration: none;
		// line-height: 1;
		line-height: 1.35;
		// border-radius: 5px;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		color: #000000;
		background-color: #fff;
		width: 100%;
		height: 100%;
	}
</style>